* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
body {
  background-color: #87b9f6;
}
.ground {
  width: 100vw;
  height: 165px;
  background-color: #77c76e;
  position: absolute;
  bottom: 0;
}
.ground .muds {
  position: absolute;
  background-color: #589454;
  width: 10px;
  height: 25px;
  border-radius: 10px;
  transform: rotate(15deg);
}
.ground .muds1 {
  left: 25%;
  bottom: 70px;
}
.ground .muds2 {
  left: 26%;
  bottom: 70px;
}
.ground .muds3 {
  transform: rotate(-20deg);
  right: 22%;
  bottom: 40px;
}
.ground .muds4 {
  transform: rotate(-20deg);
  right: 20%;
  bottom: 42px;
}
.ground .flower1 {
  position: absolute;
  width: 50px;
  height: 50px;
  animation: rotate 2s linear infinite;
}
@keyframes rotate {
  0% {
    transform-origin: 45% 38%;
    transform: rotate(0deg);
  }
  50% {
    transform: rotate(180deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
.flower1 .center {
  position: absolute;
  width: 14px;
  height: 14px;
  background-color: #ffed07;
  left: 34%;
  top: 30%;
  border-radius: 50%;
}
.flower1 .petal1 {
  position: absolute;
  width: 8px;
  height: 30px;
  background-color: #fff;
  transform: rotate(50deg);
  left: 41%;
  top: 12%;
  border-radius: 5px 5px 5px 5px;
}
.flower1 .petal2 {
  position: absolute;
  width: 8px;
  height: 30px;
  background-color: #fff;
  transform: rotate(-40deg);
  left: 41%;
  top: 12%;
  border-radius: 5px 5px 5px 5px;
}
.pole {
  position: absolute;
  width: 5px;
  height: 20px;
  background-color: #56a14c;
  border-radius: 3px;
}
.pole1 {
  left: 111px;
  bottom: 76px;
}
.pole2 {
  left: 231px;
  bottom: 107px;
}
.pole3 {
  right: 364px;
  bottom: 107px;
}
.pole4 {
  right: 464px;
  bottom: 56px;
}
.flower0 {
  left: 91px;
  bottom: 75px;
}
.flower2 {
  left: 210px;
  bottom: 105px;
}
.flower3 {
  right: 340px;
  bottom: 105px;
}
.flower4 {
  right: 440px;
  bottom: 55px;
}
#peppa {
  position: relative;
  width: 350px;
  height: 400px;
  margin: 14% auto 0;
}
#peppa .mud {
  position: absolute;
  width: 200px;
  height: 30px;
  background-color: #589454;
  border-radius: 50%;
  bottom: 5%;
  left: 50%;
  transform: translateX(-50%);
}
.left-foot,
.right-foot {
  position: absolute;
  bottom: 5%;
  z-index: 2;
  left: 80px;
}
.right-foot {
  left: 150px;
}
.foot1 {
  width: 40px;
  height: 6px;
  background-color: #000;
  border-radius: 2px;
  margin-left: 40px;
  margin-top: 10px;
  transform: rotate(9deg);
}
.foot2 {
  margin-top: -3px;
  transform: rotate(0deg);
}
.foot3 {
  width: 10px;
  height: 12px;
  background-color: #000;
  border-radius: 40%;
  transform: translate(35px, -12px);
}
.leg {
  position: absolute;
  width: 10px;
  height: 40px;
  background-color: #fcb8e1;
  bottom: 9%;
  left: 42%;
  z-index: 1;
}
.leg2 {
  left: 62%;
}
.body {
  position: absolute;
  width: 190px;
  height: 161px;
  border: 7px solid #e3353f;
  background-color: #e9565e;
  border-radius: 50% / 100% 100% 5% 5%;
  left: 50%;
  transform: translateX(-50%);
  bottom: 19%;
}
.body-Bottom {
  position: absolute;
  width: 190px;
  height: 10px;
  background-color: #e3353f;
  bottom: -7px;
  left: -7px;
  border-radius: 4px;
}
.left-hand {
  position: absolute;
  width: 100px;
  height: 70px;
  top: 20%;
  left: -36%;
}
#peppa:hover .left-hand {
  animation: wave 0.5s infinite;
}
@keyframes wave {
  0% {
    transform-origin: 90% 33%;
    transform: rotate(60deg);
  }
  50% {
    transform-origin: 90% 33%;
    transform: rotate(45deg);
  }
  100% {
    transform-origin: 90% 33%;
    transform: rotate(60deg);
  }
}
.left-hand .arm {
  position: absolute;
  width: 70px;
  height: 10px;
  background-color: #fcb8e1;
  border-radius: 5px;
  top: 30px;
  left: 18px;
  transform: rotate(-20deg);
}
.left-hand .finger {
  position: absolute;
  width: 20px;
  height: 8px;
  background-color: #fcb8e1;
  border-radius: 4px;
  transform: rotate(15deg);
  bottom: 25px;
  left: 10px;
}
.left-hand .finger2 {
  transform: rotate(-35deg);
  bottom: 15px;
  left: 8px;
}
.left-hand .finger3 {
  transform: rotate(-70deg);
  bottom: 15px;
  left: 20px;
}
.right-hand {
  position: absolute;
  width: 100px;
  height: 70px;
  /* border: 1px solid black; */
  top: 10%;
  right: -30%;
  z-index: 0;
}
.right-hand .arm {
  position: absolute;
  width: 70px;
  height: 10px;
  background-color: #fcb8e1;
  border-radius: 5px;
  top: 30px;
  left: 15px;
  transform: rotate(25deg);
}
.right-hand .finger {
  position: absolute;
  width: 20px;
  height: 8px;
  background-color: #fcb8e1;
  border-radius: 4px;
  transform: rotate(-15deg);
  bottom: 22px;
  right: 8px;
}
.right-hand .finger2 {
  transform: rotate(45deg);
  bottom: 12px;
  right: 5px;
}
.right-hand .finger3 {
  transform: rotate(70deg);
  bottom: 12px;
  right: 15px;
}
.face1 {
  position: absolute;
  border: 7px solid #eb8dc2;
  border-top: 7px solid transparent;
  z-index: 2;
  top: 95px;
  left: 94px;
  height: 122px;
  width: 148px;
  background-color: #ffb0df;
  border-radius: 50%;
}
.face2 {
  position: absolute;
  top: 59px;
  left: 103px;
  height: 150px;
  width: 147px;
  background-color: #ffb0df;
  border: 7px solid #eb8dc2;
  border-bottom-left-radius: 210px;
  border-top-right-radius: 350px;
  border-bottom-right-radius: 230px;
  border-top-left-radius: 180px;
  transform: rotate(18deg);
  z-index: 1;
}
.nose1 {
  position: absolute;
  border-radius: 50% / 100% 100% 0% 0%;
  top: 18px;
  left: 77px;
  width: 68px;
  height: 105px;
  border-right: 7px solid #eb8dc2;
  border-top: 6px solid #eb8dc2;
  background-color: #ffb0df;
  border-left: 2px solid transparent;
  transform: rotate(-73deg);
  z-index: 3;
}
.nose2 {
  position: absolute;
  background-color: #ffb0df;
  border-radius: 50% / 100% 100% 0% 0%;
  top: 55px;
  left: 64px;
  width: 60px;
  height: 76px;
  border-left: 7px solid #eb8dc2;
  border-top: 7px solid #eb8dc2;
  transform: rotate(-70deg);
  z-index: 2;
}
.nose3 {
  position: absolute;
  top: 41px;
  left: 55px;
  height: 58px;
  width: 42px;
  background-color: #ffb0df;
  border: 7px solid #eb8dc2;
  border-radius: 50%;
  transform: rotate(29deg);
  z-index: 3;
}
.nose3:after {
  position: absolute;
  content: "";
  display: block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background-color: #d667a9;
  top: 18px;
  left: 3px;
}
.nose3:before {
  position: absolute;
  content: "";
  display: block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background-color: #d667a9;
  top: 13px;
  left: 15px;
}
.eye {
  position: absolute;
  width: 35px;
  height: 35px;
  background-color: #eb8dc2;
  border-radius: 50%;
  z-index: 4;
}
.eye-left {
  top: 56px;
  left: 115px;
}
.eye-right {
  top: 68px;
  left: 155px;
}
.eye2 {
  position: absolute;
  width: 23px;
  height: 23px;
  background-color: #fff;
  border-radius: 50%;
  z-index: 4;
}
.eye2-left {
  top: 61px;
  left: 121px;
}
.eye2-right {
  top: 73px;
  left: 163px;
}
.eye3 {
  position: absolute;
  width: 10px;
  height: 11px;
  background-color: black;
  border-radius: 45%;
  transform: rotate(35deg);
  z-index: 5;
}
.eye3-left {
  top: 68px;
  left: 131px;
}
.eye3-right {
  top: 80px;
  left: 173px;
}
.ear {
  position: absolute;
  width: 30px;
  height: 55px;
  background-color: #ffb0df;
  border: 7px solid #eb8dc2;
  border-radius: 60% 60% 40% 40%/50% 50% 50% 50%;
}
.ear-left {
  top: 14px;
  left: 154px;
  transform: rotate(6deg);
}
.ear-right {
  top: 24px;
  left: 190px;
  transform: rotate(25deg);
}
.mouth {
  position: absolute;
  top: 108px;
  left: 115px;
  width: 80px;
  height: 70px;
  border: 6px solid;
  border-color: transparent transparent #e357a0 transparent;
  border-radius: 50%;
  z-index: 5;
}
.cheek {
  position: absolute;
  top: 112px;
  left: 179px;
  width: 60px;
  height: 60px;
  border: 8px solid #ffb0df;
  background-color: #ff8cd1;
  border-radius: 50%;
  z-index: 3;
}
.tail1 {
  position: absolute;
  width: 20px;
  height: 20px;
  right: -30px;
  bottom: 10px;
  border-radius: 50%;
  border: 6px solid #ffb0df;
}
.tail1:before {
  position: absolute;
  left: -16px;
  top: 9px;
  content: "";
  display: block;
  width: 20px;
  height: 5px;
  background-color: #ffb0df;
  border-radius: 5px;
}
.tail1::after {
  position: absolute;
  left: 6px;
  top: 3px;
  content: "";
  display: block;
  width: 20px;
  height: 5px;
  background-color: #ffb0df;
  border-radius: 5px;
  transform: rotate(-30deg);
}
